<template>
	<view>
		<view class="padding30rpx fontSize32rpx" style="font-weight: bold;">当前课程</view>
		<view class="padding30rpx">
			<view class="margin-top25rpx ">
				<!-- 单个复选框 -->
				<view class="term-flex u-flex">
					<view>
						<u-icon size="40" name="/static/images/radio_select.png"></u-icon>
					</view>
					<view class="u-m-l-20">
						<image class="term-flex-img" :src="dataList1.imgName"></image>
					</view>
					<view style="width: 60%;">
						<view class="term-flex-tit">
							{{dataList1.name}}
						</view>
						<view class="dis" style="margin-top: 50rpx;">
							<view class="term-left">学习币：{{dataList1.currency}}</view>
						</view>
					</view>
				</view>
				<!-- 	<u-radio-group v-model="checked" @change="radioGroupChange">
					
				</u-radio-group>
				 -->
			</view>
		</view>
		<view class="padding30rpx fontSize32rpx margin-top25rpx" style="font-weight: bold;">其他推荐课程</view>
		<view class="margin-top25rpx padding30rpx" style="padding-bottom: 150rpx;">
			<view class="term-flex dis align-items" v-for="(item,index) in dataList" :key="index">
				<u-icon @click="selectItem(item)" size="40"
					:name="item.chick?'/static/images/radio_select.png':'/static/images/radio.png'">
				</u-icon>

				<view class="">
					<image class="term-flex-img" :src="item.imgName"></image>
				</view>
				<view style="width: 60%;">
					<view class="term-flex-tit">
						{{item.name}}
					</view>
					<view class="dis" style="margin-top: 50rpx;">
						<view class="term-left">学习币：{{item.currency}}</view>
					</view>
				</view>
			</view>
			<view class="dao">到底了~</view>
		</view>

		<view class="padding30rpx buylist-bot dis align-items">
			<view style="width: 25%;" class="dis">
				<u-icon @click="allTap()" size="40"
					:name="allselect?'/static/images/radio_select.png':'/static/images/radio.png'">
				</u-icon>
			</view>
			<view class="buyhe dis align-items">
				<text>合计：</text>
				<view class="flexc align-items">
					<label>{{allPrice() || 0}}</label>
					<image src="../../static/user/bi.png"></image>
				</view>

			</view>
			<view class="buybtn" @tap="jie">结算</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				more: true,

				isChecked: false,
				checkboxData: [],
				checkedArr: [], //复选框选中的值
				allChecked: false, //是否全选
				dataList1: [],
				dataList: [],
				//是否选择购买
				checked: false,
				idList: [],
				sum: 0,
				sum1: 0,
				id: 0,
				pid: 0,

				allselect: false
			}
		},
		onLoad(option) {
			this.id = option.id || ''
			this.pid = option.pid || ''
			//获取课程详情
			if (!this.pid || !this.id) {
				this.$refs.uToast.show({
					title: '参数错误',
				})
				return;
			};
			this.selectCurriculumDetails()
			//
			this.selectCourseList()
		},
		methods: {
			//查询课程详情
			selectCurriculumDetails() {
				this.$http.get('app/CurriculumContrller/selectCurriculumDetails', {
					id: this.id
				}).then(res => {
					if (res.code == 200) {
						this.dataList1 = res.data.tcurriculum
					}
				})

			},
			
			// 查询某个岗位热门6条数据
			selectCourseList() {
				this.$http.get('app/CurriculumContrller/selectCourseList', {
					gid: this.pid
					
				}).then(res => {
					if (res.code == 200) {
						res.data.forEach(e => {
							e.chick = false
							this.dataList.push(e)
						})
						// this.dataList = res.data
					}
				})

			},
			//结算
			jie() {
				// uni.navigateTo({
				// 	url: '../BuyOrder/BuyOrder'
				// })
				let data = []
				data.push(this.dataList1);
				uni.showLoading({
					title: '',
					mask: true
				})
				this.dataList.forEach(e => {
					if (e.chick) {
						data.push(e);
					}
				})
				if(data.leng<1){
					this.$mHelper.toast('全选择需要购买的课程')
					return
				}
				setTimeout(() => {
					uni.hideLoading()
					uni.setStorage({
						key: 'orderData',
						data: data,
						success: () => {
							this.$mHelper.to('/pagesB/BuyOrder/BuyOrder?pid='+this.pid)
						}
					})

				}, 500);
			},
			selectItem(e) {
				e.chick = !e.chick;
			},
			//全选
			allTap() {
				this.allselect = !this.allselect
				this.dataList.forEach(e => {
					e.chick = this.allselect ? true : false
				})
			},
			//计算价格
			allPrice() {
				let num = 0;
				this.dataList.forEach(e => {
					if (e.currency && e.chick) {
						num += e.currency;
					}
				})
				this.alsdra();
				return num + this.dataList1.currency
			},
			//
			alsdra() {
				let num = 0
				this.dataList.forEach(e => {
					if (e.chick) {
						num++
					}
				})
				if (num >= this.dataList.length) {
					this.allselect = true
				} else {
					this.allselect = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.buyhe {
		width: 30%;
		color: #FA4D4D;

		label {
			font-size: 38rpx;
		}

		image {
			width: 31rpx;
			height: 31rpx;
			margin-left: 10rpx;
		}
	}

	.buybtn {
		height: 76rpx;
		background-color: #2D9485;
		color: #FFFFFF;
		text-align: center;
		line-height: 76rpx;
		width: 226rpx;
		border-radius: 10rpx;
	}

	.buylist-bot {
		margin-bottom: 10rpx;
		position: fixed;
		width: 100%;
		z-index: 100;
		bottom: 0;
		height: 120rpx;

		background: #FFFFFF;
		color: #666666;
		border-top: 1rpx solid #dddddd;
	}

	.term-flex {
		display: flex;
		margin-top: 25rpx;

		.term-flex-img {
			width: 180rpx;
			height: 180rpx;
			margin-right: 15rpx;
			border-radius: 10rpx;
		}

		.term-flex-tit {
			font-size: 30rpx;
			color: #333333;

		}

		.bi_name {
			display: flex;
			justify-content: space-between;
		}

		.tabg {
			display: inline-block;
			color: #00A29A;
			background: #D9F6FF;
			font-size: 24rpx;


		}

		.term-left {
			background: #D9F6FF;
			font-size: 24rpx;
			line-height: 45rpx;
			border-top-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			padding: 0 10rpx;
			color: #00A29A;
			;
		}

		.term-right {
			border: 1rpx solid #00A29A;
			color: #00A29A;
			font-size: 24rpx;
			padding: 4rpx 15rpx;
		}
	}
</style>
